<template>
  <div class="home-container">
    <header class="header-box">
      <h1>文章归档</h1>
      <small>目前共154篇文章</small>
    </header>
    <div class="content-box">
      <a-timeline mode="alternate">
        <a-timeline-item>
          <a-tag color="#f50"> 2015-09-01 Create a services site</a-tag>
        </a-timeline-item>
        <a-timeline-item color="green">
          Solve initial network problems 2015-09-01
        </a-timeline-item>
        <a-timeline-item>
          <a-icon slot="dot" type="clock-circle-o" style="font-size: 16px" />
          Sed ut perspiciatis unde omnis iste natus error sit voluptatem
          accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
          ab illo inventore veritatis et quasi architecto beatae vitae dicta
          sunt explicabo.
        </a-timeline-item>
        <a-timeline-item color="red">
          <span>Network problems being solved</span>
          <a-tag color="#f50"> 2015-09-01 </a-tag>
        </a-timeline-item>
        <a-timeline-item>Create a services site 2015-09-01</a-timeline-item>
        <a-timeline-item>
          <a-icon slot="dot" type="clock-circle-o" style="font-size: 16px" />
          Technical testing 2015-09-01
        </a-timeline-item>
      </a-timeline>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.home-container {
  background-color: #f1f3f4;
  .header-box {
    background-color: #f9f9f9;
    padding: 20px;
    h1 {
      font-size: 30px;
      color: #000;
      margin-bottom: 0;
    }
    small {
      letter-spacing: 2px;
      color: #a0a0a0;
      font-size: 13px;
    }
  }
  .content-box {
    padding: 20px;
    min-height: 100vh;
  }
}
</style>
